<template>
  <div id="list-demo" class="demo">
    <!-- 原来我们会默认把transitionGroup 渲染成 span 标签 tag就是指定渲染标签 -->
    <transition-group appear name="list" tag="div">
      <div
        class="list-item"
        v-for="item in list"
        :key="item.id"
        @click="handleDel(item)"
      >
        {{ item.name }}
      </div>
    </transition-group>
  </div>
</template>

<script>
export default {
  name: 'comList',
  props: {
    list: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      newList: this.list
    };
  },
  methods: {
    handleDel(curItem) {
      this.$emit('del', curItem.id);
      // this.newList = this.newList.filter(item => item.id !== curItem.id);
    }
  }
};
</script>

<style lang="scss" scoped>
.list-item {
  margin-bottom: 10px;
  background-color: #f5a7a7;
  height: 30px;
  font-size: 20px;
}
.list-enter-active,
.list-leave-active {
  transition: all 1s;
}
.list-enter,
.list-leave-to {
  opacity: 0;
  transform: translateX(30px);
}
</style>
